<template>
	<view>
		<u-form :model="form" id="form-container">
			<u-form-item label="工段编号" :label-width="labelWidth">
				<u-input v-model="form.sectionNo" />
			</u-form-item>
			<u-form-item label="关键字查询" class="u-flex u-flex-nowrap" :label-width="labelWidthType">
				<div class="u-flex u-flex-nowrap u-row-between">
					<u-input v-model="form.keyWord" />
					<u-button type="success" size="default" @click="queryKeyWord">查询</u-button>
				</div>
			</u-form-item>
			<u-form-item label="事项描述" :label-width="labelWidth">
				<u-input v-model="form.directorDesc" :placeholder="defaultReminder" type="textarea" disabled />
			</u-form-item>
			<u-form-item label="事项编号" :label-width="labelWidth">
				<u-input v-model="form.directorScoreCode" :placeholder="defaultReminder" disabled />
			</u-form-item>
			<u-form-item label="分数" :label-width="labelWidth">
				<u-input v-model="form.score" :placeholder="defaultReminder" disabled />
			</u-form-item>
			<u-form-item class="u-flex u-row-center">
				<u-button type="success" size="medium" @click="postForm">提交</u-button>
			</u-form-item>
		</u-form>
		<u-action-sheet :list="keyList" v-model="popShow" @click="problemNatureSelect"></u-action-sheet>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { getDirectorScore, saveDiretorScore } from '../../utils/index.js'
	export default {
		data() {
			return {
				form: {
					sectionNo: '',					//工段编号
					directorDesc: '',			//事项描述
					directorScoreCode: '',			//事项编号
					score: '',						//分数
					keyWord: ''	
				},
				labelWidth: 140,					//表单每一项的宽度
				keyList: '',						//后台传递过来的对象经过修改键值赋值给keyList数组
				popShow: false,						//弹出层的显示控制条件
				defaultReminder: '请通过输入关键字查询'
			}
		},
		methods: {
			async queryKeyWord() {
				const { data } = await getDirectorScore({keyWord: this.form.keyWord})
				if(data.code == 1) {
					this.keyList = this.changeKeyValue(data.data)
					this.popShow = true
				} else {
					console.log("查询失败")
				}
			},
			// 修改后台传递过来参数的键值，改directorDesc为text
			changeKeyValue(data) {
				const newData = []								//经过处理返回的数据
				for(let i = 0; i < data.length; i++) {
					let judgeStr = data[i].score.toString().substr(0, 1)
					let obj = {}
					if( judgeStr != '-') {
						obj = {
							text: data[i].directorDesc + '(' + data[i].score + ')',
							directorScoreCode: data[i].directorScoreCode,
							score: data[i].score,
							color: '#66CD00'
						}
						newData.push(obj)
					} else {
						obj = {
							text: data[i].directorDesc + '(' + data[i].score + ')',
							color: 'red',
							directorScoreCode: data[i].directorScoreCode,
							score: data[i].score
						}
						newData.unshift(obj)
					}
					
				}
				return newData
			},
			//选择相应的选项，并且填入表单
			problemNatureSelect(index) {
				this.form.directorScoreCode = this.keyList[index].directorScoreCode
				this.form.score = this.keyList[index].score
				this.form.directorDesc = this.keyList[index].text
			},
			// 上传员工绩效奖惩表单
			async postForm() {
				const query = {}
				query.directorScoreCode = this.form.directorScoreCode
				query.sectionNo = this.form.sectionNo
				const { data } = await saveDiretorScore(query)
				const errMsg = data.msg
				if(data.code == 1) {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			}
		}
		// onLoad(option) {
		// 	this.form.sectionNo = option.sectionNo
		// }
	}
</script>

<style lang="scss" scoped>
.content {
	padding: 24rpx;
	text-align: center;
}
.buttonGap {
	margin-top: 20rpx;
}
.main-content {
	width: 100%;
}
#form-container ::v-deep .u-form-item {
	margin-top: 15rpx;
	padding: 10rpx 30rpx;
}
</style>
